<template>
  <view class="detail" >
    
	<swiper @click='showTips = !showTips' class="swiper" @change="changeImage" :current="currentIndex"  :interval="3000" :duration="1000">
		<swiper-item v-for="item in imageList" :key="item.id">
			<image :src="item?.info?.smallPicurl" mode=""></image>
		</swiper-item>
	</swiper>
	
	<view  v-show="showTips" class="back" @click="goBack" :style="{top:`calc( 40rpx + ${statusBarHeight}px)`}"> 
		<uni-icons size="32" color="#fff" type="left"></uni-icons>
	</view>
	<view  v-show="showTips" class="page" :style="{top:`calc( 80rpx + ${statusBarHeight}px)`}">
		{{currentIndex+1}} / {{imageList.length}}
	</view>
	<view  v-show="showTips" class="time" :style="{top:`calc( 140rpx + ${statusBarHeight}px)`}">
		<view class="hour">{{dayjs(Date.now()).format('HH:mm')}}</view>
		<view class="date">{{dayjs(Date.now()).format('MM月DD日')}}</view>
	</view>
	
	<view v-show="showTips" class="operate-box">
		<view @click="popup.open('bottom')">
			<uni-icons size="26" type="info"></uni-icons>
			<text>信息</text>
		</view>
		<view @click="showRatePopup">
			<uni-icons size="26" type="star"></uni-icons>
			<text>{{info?.score}}</text>
		</view>
		<view @click="downloadFile">
			<uni-icons size="26" type="cloud-download"></uni-icons>
			<text>下载</text>
		</view>
	</view>
	
	<uni-popup class="popup" ref="popup" background-color="#fff" borderRadius="20rpx 20rpx 0 0">
		<view class="header">
			<text></text>
			<text class="text">壁纸信息</text>
			<uni-icons @click="popup.close()" type="closeempty" size="20" color="#666"></uni-icons>
		</view>
		<view class="content">
			
			<view>
				<label>壁纸ID:</label>
				<text>{{info?._id}}</text>
			</view>
			<view>
				<label>发布者:</label>
				<text>{{info?.nickname}}</text>
			</view>
			<view>
				<label>评分:</label>
				<view class="rate"> <uni-rate disabled class="uni-rate" size="20" disabled-color="#FFCA42" :value="Number(info?.score)"  /> {{info?.score}}分</view>
			</view>
			<view>
				<label>摘要:</label>
				<text>{{info?.description}}</text>
			</view>
			<view>
				<label>标签:</label>
				<view>
					<text class='tag' v-for="(item,index) in info?.tabs" :key="item">{{item}}</text>
				</view>
			</view>
			<view class="tips">
			声明:本图片来用户投稿,非商业使用,用于免费学习交流，如侵犯了您的权益,您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com,管理将删除侵权壁纸,维护您的权益。
			</view>
		</view>
	</uni-popup>
	
	<uni-popup class="rate-popup" ref="ratePopup" borderRadius="20rpx" background-color="#fff">
		<view class="header">
			<view class="header">
				<text></text>
				<text class="text">{{info?.userScore?"已经评过分了":"壁纸信息"}}</text>
				<uni-icons @click="ratePopup.close()" type="closeempty" size="20" color="#666"></uni-icons>
			</view>
		</view>
		
		<view class="content">
			<view><uni-rate size="30" :disabled="info?.userScore" disabled-color="#FFCA42" v-model="rate"></uni-rate><text> {{rate}} 分</text></view>
			<button size="mini" :disabled="info?.userScore" plain @click="ratePicture">确认评分</button>
		</view>
	</uni-popup>
  </view>
</template>

<script setup>
import dayjs from 'dayjs';
import { request } from '../../utils';

const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)
	const currentIndex = ref(0)
	const imageList = ref([])
	
	const showTips = ref(true)
	const popup = ref(null)
	const ratePopup = ref(null)
	const rate = ref(0)
	
	const info =computed(()=>imageList.value[currentIndex.value]?.info)
	
	/**
	 * 展示评分弹窗
	 */
	const showRatePopup = ()=>{
		rate.value = Number(info.value?.userScore || 0) 
		ratePopup.value.open('center')
	}
	
	/**
	 * 下载文件
	 */
	const downloadFile = ()=>{
		// #ifdef H5
		uni.showModal({
			content:"请长按保存壁纸",
			showCancel:false
		})
		// #endif
		// #ifndef H5
		
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			request({
				url:'https://tea.qingnian8.com/api/bizhi/downloadWall',
				data:{
					classid:info.value?.classid,
					wallId:info.value?._id
				}
			}).then(()=>{
				uni.getImageInfo({
					src:info.value?.smallPicurl,
				}).then(res=>{
					console.log(res);
					uni.saveImageToPhotosAlbum({
						filePath:res.path
					}).then(res=>{
						console.log(res);
						uni.showToast({
							title:res.path?`图片保存在${res.path}`:'保存成功',
							icon:'none'
						})
					}).catch(err=>{
						console.error(err)
						if(err.errMsg === "saveImageToPhotosAlbum:fail auth deny"){
							uni.showModal({
								title:"提示",
								content:'请授权访问相册'
							}).then(res=>{
								if(res.confirm){
									uni.openSetting().then(setting=>{
										console.log(setting);
										if(setting.authSetting['scope.writePhotosAlbum']){
											uni.showToast({
												title:'授权成功,请重新下载图片',
												icon:'none'
											})
										}else{
											uni.showToast({
												title:'授权失败,请重新授权',
												icon:'none'
											})
										}
									})
								}
							})
						}else{
							uni.showToast({
								title:'下载失败',
								icon:'none'
							})
						}
					})
					.finally(()=>{
						uni.hideLoading()
					})
				}).catch(err=>{
					console.error(err)
				})
				.finally(()=>{
					uni.hideLoading()
				})
			})
			.finally(()=>{
				uni.hideLoading()
			})
		// #endif
	}
	
	/**
	 * 为图片评分
	 */
	const ratePicture = ()=>{

		const data = {
				classid:info.value?.classid,
				wallId:info.value?._id,
				userScore: String(rate.value)
			}
		request({
			url:'https://tea.qingnian8.com/api/bizhi/setupScore',
			data,
		}).then(res=>{
			
			setRateStorage(data)
			ratePopup.value.close()
		})
	}
	
	const setRateStorage = (data)=>{
		let rateList = uni.getStorageInfoSync('historyRateList') || []
		rateList.push(data)
		uni.setStorageSync('historyRateList',rateList)
	}
	
	const changeImage = (e)=>{
		currentIndex.value = e.detail.current
		if(!imageList.value[e.detail.current].info){
			getImageInfoById(imageList.value[e.detail.current].id)
		}
	}
	
	const getImageInfoById = (id)=>{
		request({
			url:'https://tea.qingnian8.com/api/bizhi/detailWall',
			data:{
				id
			}
		}).then(res=>{
			console.log(res);
			imageList.value.find(item=>item.id===id).info =  res.data[0]
		})
	}
	const goBack = ()=>{
		uni.navigateBack()
	}
	
	onLoad(e=>{
		console.log(e);
		let list = e.ids.split(',').map(item=>({
			id:item,
		}))
		imageList.value= list
		currentIndex.value = list.findIndex(item=>item.id===e.id)
		
		nextTick(()=>{
			getImageInfoById(e.id)
		})
		
		console.log(imageList.value,currentIndex.value);
	})

</script>

<style lang="scss" scoped>
.detail{
	position: relative;
	width: 100vw;
	height: 100vh;
	.swiper{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	
	.back{
		position: absolute;
		left: 40rpx;
		top: 40rpx;
		background-color: rgba(0,0,0,.5);
		border-radius: 50%;
		border: 2rpx solid #666;
	}
	.page{
		position: absolute;
		left: 50%;
		top: 120rpx;
		transform: translateX(-50%);
		display: inline;
		padding: 10rpx 30rpx;
		background-color: rgba(0,0,0,.3);
		color: #fff;
		font-size: 28rpx;
		border-radius: 60rpx;
	}
	
	.time{
		position: absolute;
		left: 50%;
		top: 200rpx;
		transform: translateX(-50%);
		display: inline;
		padding: 10rpx 30rpx;
		color: #fff;
		text-align: center;
		.hour{
			font-size: 108rpx;
			margin-bottom: 10rpx;
			text-shadow: 0 0 6px #666;
		}
		.date{
			font-size: 28rpx;
			text-shadow: 0 0 6px #666;
		}
	}
	
	.operate-box{
		width: 400rpx;
		height: 100rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-bottom: calc( env(safe-area-inset-bottom) + 50rpx);
		transform: translateX(-50%);
		background-color: rgba(255,255,255,.8);
		backdrop-filter: blur(10px);
		border-radius: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #666;
		font-size: 24rpx;
		view{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	
	.popup{
		.header{
			padding: 25rpx 22rpx;
			border-radius: 30rpx 30rpx 0 0 ;
			font-size: 24rpx;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.content{
			padding: 25rpx 22rpx;
			&>view{
				display: flex;
				justify-content: space-between;
				margin-bottom: 14rpx;
				label{
					width: 120rpx;
					color: #666;
					text-align: right;
				}
				&>text{
					display: block;
					width: calc(100% - 140rpx);
				}
				
				view{
					width: calc(100% - 140rpx);
					margin: 20rpx 0;
					text{
						padding: 6rpx 20rpx;
						margin-right: 10rpx;
						border: 1px solid $uni-color-primary;
						border-radius: 60rpx;
					}
					
				}
				.rate{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					color: #FFCA42;
					margin: 0;
					.uni-rate{
						width:max-content;
						margin: 0;
						margin-right: 10rpx;
					}
				}
			}
			
			.tips{
				background-color: #F6F6F6;
				padding: 14rpx;
				line-height: 1.8em;
				color: #666;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	
	.rate-popup{
		.header{
			width: 600rpx;
			box-sizing: border-box;
			padding: 25rpx 22rpx;
			border-radius: 30rpx 30rpx 0 0 ;
			font-size: 24rpx;
			color: #666;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.content{
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			view{
				display: flex;
				align-items: center;
				color: #FFCA42;
				text{
					margin-left: 10rpx;
				}
			}
			button{
				margin-top: 20rpx;
			}
		}
	}
}
</style>
